<template>
    <div class="home">
      <home-header ></home-header>
      <home-swiper :swiperList="swiperList"></home-swiper>
      <home-icons :iconList="iconList"></home-icons>
      <home-recommend :recommendList="recommendList"></home-recommend>
      <home-wenkend :wenkendList="wenkendList"></home-wenkend>
    </div>
</template>

<script>

  import HomeHeader from './componets/Header'

  import HomeSwiper from './componets/swiper'

  import HomeIcons from  './componets/icons'

  import HomeRecommend from './componets/recommend'

  import HomeWenkend from './componets/weekend'

  import axios from 'axios'
    export default {
        name: "home",
      components:{
          HomeHeader,
          HomeSwiper,
          HomeIcons,
          HomeRecommend,
          HomeWenkend
      },
      data () {
          return {
            lastCity:'',
            swiperList:[],
            iconList:[],
            recommendList:[],
            wenkendList:[]
          }
      },
      // methods: {
      //   getHomeInfo() {
      //     axios.get('/api/index.json').then(this.getInfoSucc)
      //   },
      //   getInfoSucc(res) {
      //     console.log(res);
      //   }
      // },
      methods:{
          getHomeInfo() {
            axios.get('/api/index.json?city=' + this.$store.state.city).then((response) => {
              let res = response.data.data
              console.log(res);
              if( res ) {

                this.swiperList = res.swiperList
                this.iconList = res.iconList
                this.recommendList = res.recommendList
                this.wenkendList = res.weekendList
              }

            })
          }
      },
      mounted(){
          this.lastCity = this.$store.state.city
          this.getHomeInfo()
      },
      activated() {
          if (this.lastCity !== this.$store.state.city){
            this.lastCity = this.$store.state.city
            this.getHomeInfo()
          }
      }
    }
</script>

<style lang="stylus" scoped>
  .home
    /*font-size:50px*/
</style>
